<!-- 
 * 需求匹配页面组件
 * @author: 
 * @since: 2022-05-11
 * index.vue
-->
<template>
    <div class="demand-container">
        <div class="search">
            <Filters :formModel="state.formModel" :formLabel="state.formLabel" @reset="reset" @filter="filter"></Filters>
        </div>
        <div class="table">
            <TableCom :tableHeader="state.tableHeader" :tableData="state.tableData" @getCurrentChange="getCurrentChange" @colSelect="colSelect" @refresh="getDemandList()" :pagination="state.pagination" :loading="loading" @getSelectChange="getSelectChange" @getSizeChange="getSizeChange" handleWidth="160" :isShowLogicHandleCol="true" :isShowGrooveHandleCol="false">
                <template #handle="scope">
                    <div class="table-button">
                        <div class="btn" @click="goDetail(scope.row)" v-if="scope.row.demandState === 'JOIN_OK'">详情</div>
                        <div class="btn" @click="goSmartMatch(scope.row)" v-if="scope.row.demandState === 'SUCCESS' || scope.row.demandState === 'JOIN'">智能匹配</div>
                        <div class="btn" @click="goFile(scope.row)" v-if="scope.row.demandState === 'JOIN'">归档</div>
                        <div class="btn" @click="goHistory(scope.row)" v-if="scope.row.isHistory === true">对接记录</div>
                    </div>
                </template>
                <functionBtn :btnList="btnList" @clickHandle="clickHandle"></functionBtn>
            </TableCom>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { colFilters } from '@/utils/common.js'
import { useRouter } from 'vue-router';
import { getDemandListApi } from '@/api/interface/match.js'
import { getDomainApi, getDictItemListApi } from '@/api/public/publicDict.js'
import { sessionstorage } from '@/utils/storage.js'


const router = useRouter();

const state = reactive({
    formModel: {//需求匹配搜索列表的参数
        keyword: '',//需求名称
        industryCodeOne: '',//需求所属领域
        demandTypeId: '',//需求类别
        demandState: '',//对接阶段
    },
    formLabel: [
        {
            label: '需求名称',
            model: "keyword",
            type: "text",
            width: '160',
            placeholder: '请输入需求名称',
        },
        {
            label: '需求所属领域',
            model: "industryCodeOne",
            type: "select",
            width: '160',
            placeholder: '请选择需求所属领域',
            option: [],
        },
        {
            label: '需求类别',
            model: "demandTypeId",
            type: "select",
            width: '160',
            placeholder: '请选择需求类别',
            option: [
            ],
        },
        {
            label: '对接阶段',
            model: "demandState",
            type: "select",
            width: '160',
            placeholder: '请选择对接阶段',
            option: [
                {
                    value: '',
                    key: '全部'
                },
                {
                    value: 'JOIN',
                    key: '对接中'
                },
                {
                    value: 'JOIN_OK',
                    key: '对接完成'
                },
                {
                    value: 'SUCCESS',
                    key: '审核通过'
                }
            ],
        },
    ],
    tableData: [],
    tableHeader: [
        {
            label: '需求名称',
            prop: "demandTitle",
        },
        {
            label: '需求所属领域',
            prop: "industryNameOne",
        },
        {
            label: '需求类别',
            prop: "demandTypeName",
        },
        {
            label: '需求联系人',
            prop: "demandContactPerson",
        },
        {
            label: '需求联系人电话',
            prop: "demandContactPhone",
        },
        {
            label: '对接阶段',
            prop: "demandStateName",
        },
    ],
    pagination: {//分页
        currentPage: 1,
        size: 10,
        total: 0,
    },
    selectTableId: [],//选择表格数据

})
//区域加载
const loading = ref(true)
//需求匹配模块功能按钮
const btnList = reactive([
    // {
    //   name: '导出全量匹配结果',
    //   icon: 'daochu1',
    //   bgColor: '#00A2FF'
    // },
    // {
    //   name: '导出选中匹配结果',
    //   icon: 'daochu1',
    //   bgColor: '#00A2FF'
    // },


])


onMounted(() => {
    getDomain()
    getDictItemList()
    getDemandList()

})

//跳转智能匹配
const goSmartMatch = (data) => {
    sessionstorage.set('demandItem', data)
    router.push({ name: 'DemandSmartMatch' }).catch(() => { });

}
//跳转归档
const goFile = (data) => {
    sessionstorage.set('demandItem', data)
    router.push({ name: 'DemandFile' }).catch(() => { });
}

//跳转去详情
const goDetail = (data) => {
    sessionstorage.set('demandItem', data)
    router.push({ name: 'DemandDetail' }).catch(() => { });
}
//跳转去对接记录
const goHistory = (data) => {
    sessionstorage.set('demandItem', data)
    router.push({ name: 'DemandHistory', params: { id: data.id } }).catch(() => { });
}

//获取需求所属领域
const getDomain = () => {
    getDomainApi({ parentId: 0 }).then(res => {
        const { status, data } = res
        if (status === 200) {
            state.formLabel[1].option = data.map(item => ({
                ...item,
                value: item.id,
                key: item.keyName
            }))
        }
    })


}
//获取需求类别
const getDictItemList = () => {
    const params = {
        dictType: 'DICT_DEMAND'
    }
    getDictItemListApi(params).then(res => {
        const { status, data } = res
        if (status === 200) {
            state.formLabel[2].option = data.result.map(item => ({
                ...item,
                value: item.id,
                key: item.keyName
            }))

        }

    })
}

//获取需求匹配列表
const getDemandList = () => {
    loading.value = true
    const params = {
        ipi: state.pagination.currentPage,
        ips: state.pagination.size,
        keyword: state.formModel.keyword,
        demandTypeId: state.formModel.demandTypeId,
        industryCodeOne: state.formModel.industryCodeOne,
        demandState: state.formModel.demandState
    }
    getDemandListApi(params).then(res => {
        const { data, status } = res
        if (status === 200) {
            loading.value = false
            state.tableData = data.result.map(item => ({
                ...item,
                status: item.demandState
            }))
            state.pagination.currentPage = data.pageNum
            state.pagination.size = data.pageSize
            state.pagination.total = data.total

        }

    })
}

//根据状态表格中的操作
const statusHandleEvent = (data) => {
    sessionstorage.set('demandItem', data)
    router.push({ name: 'DemandEnteringAbutmentResult' }).catch(() => { });
}

//搜索
const filter = () => {
    getDemandList()
}
//重置
const reset = () => {
    for (let key in state.formModel) {
        state.formModel[key] = ''
    }
    getDemandList()
}

//点击当前页
const getCurrentChange = (val) => {
    state.pagination.currentPage = val;
    getDemandList()
}

//点击条数
const getSizeChange = (val) => {
    state.pagination.size = val;
    getDemandList()
}

//表格中的操作
const comEvent = (type, data) => {
    switch (type) {
        case 'details':
            sessionstorage.set('demandItem', data)
            router.push({ name: 'DemandMatchDetail' }).catch(() => { });
            break;
    }
}

//表格筛选列---取消全选
const colSelect = (data, type, e, currentItem) => {
    if (type === 'filter') {
        const currentData = colFilters(data, e, currentItem, state.tableHeader)
        state.tableHeader = currentData;
    } else {//全选/全取消
        state.tableHeader = data;
    }
}

//刷新table
//选择表格数据
const getSelectChange = (row) => {
    //   state.selectTableId = row.map(item => item.id)
}

</script>

<style lang="scss" scoped>
.table-button {
    display: flex;

    .btn {
        color: #00a2ff;
        margin-left: 5px;
        cursor: pointer;
    }
}
</style>
